<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:3857');
	// projection.setExtent([4815688.777514234, 1.0892372535220487E7, 4865771.080347896, 1.0967154871227982E7]);
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	console.log(projectionExtent);
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent)
	];
	const origin = origins[1];
	console.log('origin:', origin);
	console.log('projection:', projection);
	console.log('projectionExtent', projectionExtent);

	const size = ol.extent.getWidth(projectionExtent) / tileSize;

	const resolutions = [];
	const matrixIds = [];
	for (let z = 1; z < 21; z++) {
		resolutions[z - 1] = size / Math.pow(2, z - 1);
		matrixIds[z - 1] = (z - 1).toString();
	}
	// console.log(resolutions);
	// console.log(matrixIds);
	// console.log(resolutions.toString());

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions: resolutions,
		extent: projectionExtent,
		matrixIds: matrixIds
	});

	const url = `http://123.14.199.58:8086/tianjing-server/mapdata-api/services/hancheng_imagery/MapServer/WMTS?key=552280e3-8cbd-49a1-9d2a-9010045bc492`;
	// const url = `http://192.168.81.128:8080/countries-raster`;
	// const url = `http://192.168.81.128:8080/hsroadmap`;
	const tileImageSource = new ol.source.TileImage({
		projection: 'EPSG:3857',
		// tileGrid: tileGrid,
		tileUrlFunction: (tileCoord, pixelRatio, proj) => {
			let [z, x, y] = tileCoord;
			// return `${url}/${z}/${x}/${y}.png`;
			return `http://123.14.199.58:8086/tianjing-server/mapdata-api/services/hancheng_imagery/MapServer/WMTS/tile/1.0.0/hancheng_imagery/default/default028mm/${z}/${x}/${y}.png?key=552280e3-8cbd-49a1-9d2a-9010045bc492`;
		}
	});
	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'hancheng_imagery',
		matrixSet: 'default028mm',
		format: 'image/png',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});
	// 地图
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	let xyzSource = new ol.source.XYZ({
		url: 'http://123.14.199.58:8086/tianjing-server/mapdata-api/services/hancheng_wmts/MapServer/tile/{z}/{y}/{x}?key=552280e3-8cbd-49a1-9d2a-9010045bc492'
	});

	let xyzLayer = new ol.layer.Tile({
		source: xyzSource
	});

	const circlePoint = ol.proj.transform([110.545805, 35.604499], 'EPSG:4326', 'EPSG:3857');
	console.log(circlePoint);
	const points = [
		[0, 0],
		[12878538.342760017, 4542991.691869029]
	];
	const centerPoint = points[1];

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [10, 26],
			anchorXUnits: 'pixels',
			anchorYUnits: 'pixels',
			src: '../image/position_orange.png'
		})
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature],
		wrapX: false
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const map = new ol.Map({
		layers: [
			baseLayer,
			xyzLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: circlePoint,
			projection,
			zoom: 17,
			maxZoom: 19,
			minZoom: 1
			// resolutions
		})
	});
</script>
</html>
